<template>
  <div>
    <!-- .lazy失去焦点执行 -->
    <input type="text" v-model.lazy="xing" />
    <span>+</span>
    <input type="text" v-model.lazy="ming" />
    <span>=</span>
    <input type="text" v-model.lazy="pinjie" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      xing: "",
      ming: "",
    };
  },
  computed: {
    pinjie: {
      // 计算值的时候自动执行get
      get() {
        //将计算结果返回的页面
        return this.xing + " " + this.ming;
      },
      // 修改计算属性的时候自动执行set
      set(val) {
        //val是计算出来的值
        let ary = val.split(" ");
        this.xing = ary[0];
        this.ming = ary[1];
      },
    },
  },
};
</script>

<style>
</style>